<template>
  <div>
    <van-nav-bar class="head" title="口碑榜单" left-text="" left-arrow />
    <p>您觉得他们在哪些方面做的不够好？</p>

    <div class="content">
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="`${item}`"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" shape="square" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <span class="word">其他</span>
    <van-cell-group>
      <van-field v-model="message" placeholder="输入内容"   type="textarea" />
    </van-cell-group>
    <!-- 底部按钮 -->
    <div class="footer">
      <van-button type="primary" block to="voucher">提交</van-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["1、门店环境", "2、服务态度", "3、产品价格", "4、售后服务"],
      result: [],
      value: "",
    };
  },
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
  },
};
</script>
<style scoped lang="less">
.head {
  width: 100%;
  height: 51px;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(239, 239, 239, 1);
}
p {
  color: rgba(80, 80, 80, 1);
  font-size: 16px;
  width: 260px;
  height: 32px;
  margin: 40px auto;
  line-height: 32px;
}
.word {
  width: 28px;
  height: 21px;
  color: rgba(80, 80, 80, 1);
  font-size: 14px;
  padding: 16px;
}
/deep/.van-nav-bar .van-icon {
  color: rgba(153, 153, 153, 1);
}
/deep/.van-nav-bar__title {
  color: rgba(42, 131, 78, 1);
  font-size: 18px;
}
/deep/.van-field__control {
  display: block;
  width: 325px;
  height: 185px;
  padding-bottom: 163px;
  border: rgba(153, 153, 153, 1) solid 1px;
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>